<template>
  <div>
    <div class="add">
      <el-button type="primary" @click="add">新增图片条件</el-button>
      <el-button type="primary" @click="addImgOption">新增图片选项</el-button>
    </div>
    <tableVue :list="list" :state="true" v-loading="pageData.loading" :pagination="true" @changeData="selectionVal">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compileCondition(scope.row)">编辑条件
                </el-button>
                <el-button
                  size="mini"
                  @click="compile(scope.row)">查看选项
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
            <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="条件名称">
                    <el-input v-model="pageData.evelSelectName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="是否必须">
                   <el-select v-model="pageData.isNeed" placeholder="请选择">
                       <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                       </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="排序">
                      <el-input v-model="pageData.ordinal" placeholder="请输入内容"></el-input>
                 </el-form-item>
                  <el-form-item class="confirm">
                    <el-button type="primary" v-if="btnState == '1'" @click="addForm('post')">提交</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="addForm('put')">更新</el-button>
                  </el-form-item>
            </el-form>
        </slot>
      </dialogVue>
      <dialogVue title="操作" :dialog="imgOption" @close="changeData" :state="false">
          <slot>
                <el-form :model="imgOptionData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="选项名称">
                      <el-input v-model="imgOptionData.optionName" placeholder="请输入内容"></el-input>
                 </el-form-item>

                 <el-form-item label="是否必须">
                   <el-select v-model="imgOptionData.isNeed" placeholder="请选择">
                       <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                       </el-option>
                     </el-select>
                  </el-form-item>
                 <el-form-item label="图片" prop="imgUrl">
                       <el-upload
                        class="upload-demo"
                        :auto-upload='false'
                        :on-change="upload"
                        :file-list="pagefileUrl"
                        :on-exceed	= "exceed"
                        :limit="1"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :list-type="String"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                 </el-form-item>
                 <el-form-item class="confirm">
                    <el-button type="primary" v-if="btnState == '1'" @click="addOption('post')">提交</el-button>
                    <el-button type="primary" v-if="btnState == '2'" @click="compileOptionConfirm('put')">更新</el-button>
                 </el-form-item>
                </el-form>
          </slot>
      </dialogVue>
      <el-dialog title="提示" :visible.sync="compileimgOption" width="70%">
          <tableVue :list="optionList" :state="false" v-loading="pageData.loading" :pagination="true">
              <slot>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="compileOption(scope.row)">编辑选项
                      </el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        class="del"
                        @click="handleEdit(scope.row,2)">删除</el-button>
                    </template>
                </el-table-column>
              </slot>
          </tableVue>
          <el-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body>
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button @click="compileimgOption = false">取 消</el-button>
            <!-- <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button> -->
          </div>
        </el-dialog>
  </div>
</template>
<script>
  import Data from './imgEstimationData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { Base64 } from 'js-base64';
  import {
    addImgCondition,
    imgConditionList,
    addImgOption,
    delImgCondition,
    imgOptionList,
    delImgOption
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getImgConditionList();
    },
    methods : {
      getImgConditionList () {
        this.pageData.loading = true;
        imgConditionList(JSON.parse(this.$route.query.item)).then(res=>{
            if (res.data.code == 'OK') {
              this.pageData.loading = false;
              this.list.tbody = res.data.data.map(item=>{
                item.gmtCreate = this.switchTime(item.gmtCreate);
                item.gmtUpdate = this.switchTime(item.gmtUpdate);
                if (item.isNeed == 'Y') {
                  item.isNeed = '是'
                } else {
                  item.isNeed = '否'
                }
                return item;
              });
            } else {
              this.$message.error(res.data.message);
            }
        })
      },
      changeData (val) {
        this.dialog = val;
        this.imgOption = val;
      },
      addImgOption () {//添加图片选项
        if (this.conditionTplId < 1) {
            this.$message.error('请选择添加题目');
        } else if (this.conditionTplId > 1) {
            this.$message.error('只能选择一个');
        } else {
            this.btnState = '1'
            this.imgOption = true;
        }
      },
      add () {//添加图片条件
        this.btnState = '1'
        this.dialog = true;
      },
      upload (file,fileList) {//拿到图片的地址
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
             this.imgOptionData.pageImgUrl = reader.result.split(',')[1];
           }
      },
      exceed () {
        this.$message.error('只能传一张图片');
      },
      selectionVal (data) {
        this.conditionTplId = data;
      },
      compileCondition (item) {
        this.pageData.cpesId = item.cpesId;
        this.pageData.evelSelectName = item.evelSelectName;
        this.pageData.isNeed = item.isNeed;
        this.btnState = '2'
        this.dialog = true;
        // console.log(item);
      },
      compile (item) {
          this.compileimgOption = true;
          this.cpesId = item.cpesId;
          this.getImgOptionList(this.cpesId);
      },
      getImgOptionList (cpesId) {
        imgOptionList(cpesId).then(res=>{
          if (res.data.code == 'OK') {
            this.optionList.tbody = res.data.data.map(item=>{
              item.gmtCreate = this.switchTime(item.gmtCreate);
              item.gmtUpdate = this.switchTime(item.gmtUpdate);
              if (item.isNeed == 'Y') {
                item.isNeed = '是'
              } else {
                item.isNeed = '否'
              }
              return item;
            });
          }
        })
      },
      compileOption (item) {//编辑选项
        this.cpeoId = item.cpeoId;
        this.pagefileUrl = [];
        this.imgOption = true;
        this.btnState = '2';
        item.isNeed = item.isNeed == '是' ? 'Y' : 'N'
        this.imgOptionData = item;
        this.pagefileUrl.push({
          name : '',
          url : item.selectExamplePicture
        })
      },
      del (item) {//删除条件
        this.delMessage(()=>{
          delImgCondition(item.cpesId).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
                this.getImgConditionList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
      addOption (method) {//添加图片选项确定
        var id = ''
        this.conditionTplId.map(item=>{
           id = item.cpesId
        })
        var data = {
          optionName : this.imgOptionData.optionName,
          isNeed : this.imgOptionData.isNeed,
          productId :JSON.parse(this.$route.query.item),
          cpesId : id,
          selectExamplePicture : this.imgOptionData.pageImgUrl
        }
        addImgOption(data,method).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('新增成功');
                this.imgOption = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      compileOptionConfirm () {
         var temp = '';
          this.pagefileUrl.map(item=>{
             temp =  item.url
          })
        var data = {
          optionName : this.imgOptionData.optionName,
          isNeed : this.imgOptionData.isNeed,
          productId :JSON.parse(this.$route.query.item),
          cpeoId : this.cpeoId,
        }
        if (this.imgOptionData.pageImgUrl == undefined) {
          data['selectExamplePicture'] = temp;
        } else {
          data['selectExamplePicture'] = this.imgOptionData.pageImgUrl
        }
        addImgOption(data,'put').then(res=>{
          if(res.data.code == 'OK') {
              this.$message.success('编辑成功');
              this.imgOption = false;
              this.getImgOptionList(this.cpesId);
          } else {
              this.$message.error(res.data.message);
          }
        })
      },
      addForm (method) {
          var data = {
            evelSelectName : this.pageData.evelSelectName,
            isNeed : this.pageData.isNeed,
            productId :JSON.parse(this.$route.query.item),
            cpesId : this.pageData.cpesId,
            ordinal : this.pageData.ordinal
          }
          addImgCondition(data,method).then(res=>{
            if (res.data.code == 'OK') {
                this.dialog = false;
                if (method == 'post') {
                    this.$message.success('新增成功');
                    this.getImgConditionList();
                } else {
                    this.$message.success('编辑成功');
                    this.getImgConditionList();
                }
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      handleEdit (item) {
        this.delMessage(()=>{
          delImgOption(item.cpeoId).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
              this.getImgOptionList(this.cpesId);
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      }
    }
  }
</script>
<style scoped>
  .confirm {
    position: absolute;
    bottom: -1px;
    right: 100px;
  }
</style>
